//左上 柱状图
$(document).ready(function() {
    function fetchDataAndUpdate(globalName) {
        $.get(`http://127.0.0.1:5000/task6/marketName=${globalName}`).done(function (data) {
            var myCharts = echarts.init(document.querySelector('.panel .pie2'))
            option = {
                "title": {
                    "text": "水果商品销量",
                    x: "left",
                    y: "2%",
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    },
                    subtextStyle: {
                        color: '#fff',
                        fontSize: '12',
                        align:"left"
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '20%',
                    right: '10%',
                    left: '14%',
                    bottom: '25%',
                },
                xAxis: [{
                    type: 'category',
                    data: data['产品分类'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.12)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#e2e9ff',
                        rotate:55,
                        textStyle: {
                            fontSize: 12
                        },
                    },
                }],
                yAxis: [{
                    typeof: 'value',
                    axisLabel: {
                        formatter: function (value) {
                            if (value >= 10000) {
                                return parseInt(value / 10000) + '万';
                            }
                            return value;
                        },
                        color: '#e2e9ff',
                        fontSize:11,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(255,255,255,1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.5)'
                        }
                    }
                }],
                
                series: [
                    {
                        data: data['销量'],
                        symbol: 'path://M12 24c-2.2 0-4-1.8-4-4s1.8-8 4-8s4 5.8 4 8S14.2 24 12 24zM12 12c-2.2 0-4 2.2-4 5s1.8 7 4 7s4-2.8 4-7S14.2 12 12 12z',
                        type: 'scatter',
                        color: '#9ef9ff',
                        symbolSize: function (data) {
                            return data / 4000;
                        }
                    },
                ]
            };
            
                // 设置 echarts 实例的配置
                myCharts.setOption(option);
            })
    }
    fetchDataAndUpdate(window.globalName)
    $(document).on('globalNameChanged', function(event, globalName) {
        fetchDataAndUpdate(window.globalName)
      })
})

